Visaptveroša rokasgrāmata par CSS writing-mode, kas pēta, kā kontrolēt teksta virzienu internacionalizācijai (i18n) un radīt vizuāli pievilcīgas, globāli pieejamas vietnes.
CSS rakstīšanas režīms: starptautiskā teksta virziena pārvaldīšana globālām vietnēm
Mūsdienu savstarpēji saistītajā pasaulē tīmekļa vietnēm ir jāapkalpo daudzveidīga auditorija, un būtisks aspekts ir dažādu teksta virzienu apstrāde. CSS writing-mode ir spēcīgs rīks, kas ļauj izstrādātājiem kontrolēt teksta plūsmas virzienu, ļaujot viņiem izveidot patiesi internacionalizētu (i18n) un vizuāli saistošu tīmekļa pieredzi. Šī visaptverošā rokasgrāmata izpētīs writing-mode sarežģītības, sniedzot praktiskus piemērus un noderīgas atziņas, lai palīdzētu jums apgūt teksta virziena pārvaldību globālām vietnēm.
Izpratne par rakstīšanas režīmiem
CSS īpašība writing-mode norāda, vai teksta rindas tiek izkārtotas horizontāli vai vertikāli un kādā virzienā virzās bloki. Tam ir izšķiroša loma, pielāgojot tīmekļa lapas valodām, kurās izmanto dažādus rakstīšanas virzienus, piemēram:
- No kreisās uz labo (LTR): angļu, spāņu, franču, vācu un daudzas citas rietumu valodas.
- No labās uz kreiso (RTL): arābu, ebreju, persiešu un urdu.
- Vertikāls: tradicionālā ķīniešu, japāņu un mongoļu valoda.
Pēc noklusējuma tīmekļa pārlūkprogrammas izmanto horizontal-tb rakstīšanas režīmu, kas izkārto tekstu horizontāli no augšas uz leju. Tomēr writing-mode ļauj mainīt šo noklusējuma uzvedību un izveidot izkārtojumus, kas pielāgoti dažādiem teksta virzieniem.
Īpašības `writing-mode` vērtības
Īpašība writing-mode pieņem vairākas vērtības, no kurām katra norāda atšķirīgu teksta virzienu un bloka plūsmu:
horizontal-tb: Horizontāli no augšas uz leju. Teksta rindas ir horizontālas un plūst no augšas uz leju. Šī ir noklusējuma vērtība.vertical-rl: Vertikāli no labās uz kreiso. Teksta rindas ir vertikālas un plūst no labās uz kreiso. Bloki virzās uz leju.vertical-lr: Vertikāli no kreisās uz labo. Teksta rindas ir vertikālas un plūst no kreisās uz labo. Bloki virzās uz leju.sideways-rl: Novecojis aizstājvārds priekšvertical-rl.sideways-lr: Novecojis aizstājvārds priekšvertical-lr.
Ir pieejamas arī šādas vērtības, bet tās tiek izmantotas retāk:
block-flow: Izmantot bloka formēšanas konteksta virzienu, ko var ietekmēt citas īpašības.
Pamata piemēri
Ilustrēsim writing-mode izmantošanu ar dažiem vienkāršiem piemēriem:
Horizontāls teksts (noklusējums)
Šī ir noklusējuma uzvedība, tāpēc nav nepieciešams skaidri norādīt writing-mode:
<p>Šis ir horizontāls teksts.</p>
Vertikāls teksts (no labās uz kreiso)
Lai parādītu tekstu vertikāli no labās uz kreiso, izmantojiet vertical-rl:
<p style="writing-mode: vertical-rl;">Šis ir vertikāls teksts (no labās uz kreiso).</p>
Vertikāls teksts (no kreisās uz labo)
Lai parādītu tekstu vertikāli no kreisās uz labo, izmantojiet vertical-lr:
<p style="writing-mode: vertical-lr;">Šis ir vertikāls teksts (no kreisās uz labo).</p>
Praktiski `writing-mode` pielietojumi
Papildus pamata teksta virzienam writing-mode piedāvā virkni praktisku pielietojumu, lai izveidotu vizuāli saistošas un starptautiski pieejamas vietnes:
1. Pielāgošanās RTL valodām
Vietnēm, kas atbalsta RTL valodas, piemēram, arābu vai ebreju, writing-mode ir būtisks pareizai teksta attēlošanai. Jūs varat izmantot CSS selektorus, lai piemērotu writing-mode: rtl; konkrētiem elementiem vai visam dokumentam, pamatojoties uz valodas atribūtu:
<html lang="ar">
<body>
<p>هذا نص عربي.</p>
</body>
</html>
html[lang="ar"] {
direction: rtl;
unicode-bidi: bidi-override;
}
Lai gan direction: rtl; ir izšķirošs pamata virziena iestatīšanai, jums var būt nepieciešams arī unicode-bidi: bidi-override;, lai nodrošinātu pareizu jaukta virziena teksta apstrādi. Mūsdienu pieejas bieži dod priekšroku loģiskajām īpašībām, kas tiks apskatītas vēlāk.
2. Vertikālu navigācijas izvēlņu izveide
writing-mode var izmantot, lai izveidotu vertikālas navigācijas izvēlnes, kas bieži redzamas japāņu un ķīniešu vietnēs. Tas var pievienot jūsu vietnei unikālu vizuālo odziņu:
<ul class="vertical-menu">
<li><a href="#">Sākums</a></li>
<li><a href="#">Par mums</a></li>
<li><a href="#">Pakalpojumi</a></li>
<li><a href="#">Kontakti</a></li>
</ul>
.vertical-menu {
list-style: none;
padding: 0;
margin: 0;
}
.vertical-menu li a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
background-color: #f0f0f0;
border-bottom: 1px solid #ccc;
writing-mode: vertical-rl;
text-orientation: upright;
}
Šajā piemērā text-orientation: upright; tiek izmantots, lai nodrošinātu, ka teksts vertikālās izvēlnes elementos tiek attēlots vertikāli, nevis pagriezts.
3. Žurnāla stila izkārtojumu projektēšana
writing-mode var iekļaut, lai panāktu žurnāla stila izkārtojumus. Piemēram, jums var būt liels attēls ar vertikālu tekstu, kas to pārklāj, radot pārsteidzošu vizuālu efektu.
<div class="magazine-section">
<img src="image.jpg" alt="Žurnāla attēls">
<div class="vertical-text">Ekskluzīva intervija</div>
</div>
.magazine-section {
position: relative;
width: 500px;
height: 300px;
}
.magazine-section img {
width: 100%;
height: 100%;
object-fit: cover;
}
.vertical-text {
position: absolute;
top: 0;
right: 10px;
color: white;
font-size: 2em;
writing-mode: vertical-rl;
text-orientation: upright;
transform-origin: top right;
transform: rotate(180deg); /* Required to render correctly across browsers */
}
transform: rotate(180deg); bieži ir nepieciešams, lai nodrošinātu konsekventu renderēšanu dažādās pārlūkprogrammās, īpaši vecākās versijās.
4. Datu vizualizācijas uzlabošana
Datu vizualizācijā writing-mode var būt noderīgs asu apzīmēšanai diagrammās un grafikos, īpaši, ja vieta ir ierobežota. Piemēram, jūs varat pagriezt etiķetes uz vertikālās ass, lai novērstu to pārklāšanos.
Padziļinātas tehnikas un apsvērumi
Lai pilnībā izmantotu writing-mode jaudu, apsveriet šīs padziļinātās tehnikas un svarīgos faktorus:
1. Loģiskās īpašības un vērtības
Mūsdienu CSS ievieš loģiskās īpašības un vērtības, kas nodrošina elastīgāku un semantiskāku veidu, kā rīkoties ar izkārtojumu un virzienu. Fizisko īpašību, piemēram, left un right, vietā tiek izmantotas loģiskās īpašības, piemēram, start un end, kas pielāgojas rakstīšanas virzienam. Piemēram:
margin-inline-start: Ekvivalentsmargin-leftLTR režīmā unmargin-rightRTL režīmā.padding-block-start: Ekvivalentspadding-tophorizontālos rakstīšanas režīmos unpadding-leftvaipadding-rightvertikālos rakstīšanas režīmos.
Loģisko īpašību izmantošana padara jūsu CSS pielāgojamāku un vieglāk uzturamu, īpaši, strādājot ar vairākiem rakstīšanas virzieniem.
2. `writing-mode` kombinēšana ar citām CSS īpašībām
writing-mode mijiedarbojas ar citām CSS īpašībām, piemēram, text-orientation, direction un unicode-bidi, lai kontrolētu teksta izskatu un uzvedību. Šo mijiedarbību izpratne ir būtiska, lai sasniegtu vēlamos rezultātus.
text-orientation: Norāda rakstzīmju orientāciju vertikālos rakstīšanas režīmos. Vērtības ietverupright,sideways,mixedunuse-glyph-orientation.direction: Norāda teksta pamata virzienu (LTR vai RTL).unicode-bidi: Kontrolē, kā elementam tiek piemērots Unicode divvirzienu algoritms.
3. Jaukta virziena teksta apstrāde
Strādājot ar tekstu, kas satur gan LTR, gan RTL rakstzīmes (piemēram, angļu teksts arābu rindkopā), ir svarīgi izmantot unicode-bidi īpašību, lai nodrošinātu pareizu renderēšanu. Vērtība bidi-override bieži tiek izmantota, lai piespiestu noteiktu virzienu.
<p dir="rtl">هذا نص عربي يتضمن بعض الكلمات الإنجليزية <span style="unicode-bidi: bidi-override; direction: ltr;">kā šajā piemērā.</span></p>
4. Fontu apsvērumi
Ne visi fonti ir piemēroti vertikālai rakstīšanai. Daži fonti var nesaturēt glifus vertikālai rakstīšanai vai var netikt pareizi renderēti. Izmantojot vertikālos rakstīšanas režīmus, izvēlieties fontus, kas ir īpaši izstrādāti vertikālam tekstam vai kuriem ir labs atbalsts vertikāliem glifiem.
Austrumāzijas valstu (Ķīna, Japāna, Koreja) fontiem parasti ir ļoti labs atbalsts vertikālajai rakstīšanai.
5. Pieejamība
Pārliecinieties, ka jūsu writing-mode izmantošana negatīvi neietekmē pieejamību. Nodrošiniet alternatīvu tekstu attēliem un citam neteksta saturam, un nodrošiniet, ka teksts ir lasāms un saprotams lietotājiem ar invaliditāti. Izmantojiet semantiskos HTML elementus un ARIA atribūtus, lai uzlabotu pieejamību.
6. Pārlūkprogrammu saderība
writing-mode ir labs atbalsts mūsdienu pārlūkprogrammās, bet vecākām pārlūkprogrammām var būt nepieciešami piegādātāju prefiksi (piemēram, -webkit-writing-mode, -ms-writing-mode). Izmantojiet CSS preprocesoru, piemēram, Sass vai Less, lai automatizētu piegādātāju prefiksu pievienošanu, vai izmantojiet rīku, piemēram, Autoprefixer.
Labākās prakses `writing-mode` izmantošanai
Lai efektīvi izmantotu writing-mode un izveidotu globāli pieejamas vietnes, ievērojiet šīs labākās prakses:
- Kad vien iespējams, izmantojiet loģiskās īpašības un vērtības. Tas padarīs jūsu CSS pielāgojamāku un vieglāk uzturamu.
- Izvēlieties piemērotus fontus vertikālajiem rakstīšanas režīmiem. Pārbaudiet savus fontus, lai pārliecinātos, ka tie pareizi renderējas vertikālā tekstā.
- Apsveriet pieejamību. Pārliecinieties, ka jūsu
writing-modeizmantošana negatīvi neietekmē pieejamību lietotājiem ar invaliditāti. - Pārbaudiet savus izkārtojumus dažādās pārlūkprogrammās un ierīcēs. Pārliecinieties, ka jūsu izkārtojumi pareizi renderējas dažādās platformās.
- Izmantojiet CSS preprocesorus vai Autoprefixer, lai apstrādātu piegādātāju prefiksus. Tas ietaupīs jūsu laiku un pūles un nodrošinās, ka jūsu CSS ir saderīgs ar vecākām pārlūkprogrammām.
- Atdaliet saturu no noformējuma. Izmantojiet CSS, lai kontrolētu sava satura noformējumu, un izvairieties no HTML izmantošanas stilizēšanas nolūkos.
Globālu vietņu piemēri, kas izmanto `writing-mode`
Daudzas vietnes visā pasaulē izmanto writing-mode dažādiem mērķiem, sākot no pielāgošanās RTL valodām līdz vizuāli unikālu izkārtojumu izveidei. Šeit ir daži piemēri:
- Ziņu vietnes arābu vai ebreju valodā: Šīs vietnes izmanto
direction: rtlun, iespējams,writing-modepielāgojumus pareizai teksta attēlošanai. - Japānas un Ķīnas mākslas un kultūras vietnes: Bieži iekļauj vertikālu rakstību virsrakstiem, izvēlnēm un dekoratīviem elementiem.
- Modes žurnāli: Bieži izmanto vertikālu tekstu vizuālos izkārtojumos stilistisku efektu radīšanai.
Noslēgums
CSS writing-mode ir spēcīgs rīks, lai izveidotu internacionalizētas un vizuāli saistošas vietnes. Izprotot dažādās īpašības vērtības un to, kā tā mijiedarbojas ar citām CSS īpašībām, jūs varat izveidot izkārtojumus, kas pielāgojas dažādiem teksta virzieniem un uzlabo lietotāja pieredzi globālai auditorijai. Atcerieties ņemt vērā pieejamību, pārlūkprogrammu saderību un fontu izvēli, lai nodrošinātu, ka jūsu vietnes ir pieejamas un vizuāli pievilcīgas visiem lietotājiem.
Tīmekļa izstrādei turpinot attīstīties, tādu tehniku kā writing-mode apgūšana kļūst arvien svarīgāka, lai radītu patiesi globālas un iekļaujošas tiešsaistes pieredzes. Aptveriet internacionalizācijas spēku un veidojiet vietnes, kas uzrunā lietotājus no visām pasaules malām.